<template>
    <div class="content" align-h="center">
      <div v-for="item in articles"
          :key="item.id"
          class="content-row mb-4 pt-1 pl-4 pr-4 pl-md-3 pr-md-3 pb-3 shadow-sm">
        <div class="title mw-100">
          <span @click="selectItem(item.id)"
                @mouseenter="mouseStart(0, $event)"
                @mouseleave="mouseEnd(0, $event)">
            {{item.title}}
          </span>
        </div>
        <div class="bottom-content mr-md-2">
          <div class="d-md-flex flex-row">
            <div @click="selectItem(item.id)" col cols="4" md="4"
                class="picture">
              <img @mouseenter="mouseStart(1, $event)"
                @mouseleave="mouseEnd(1, $event)"
                v-lazy="item.image"
                :alt="item.title"
                class="d-none d-md-block"
                style="width: 200px; height: 140px"
              />
              <b-img-lazy @mouseenter="mouseStart(1, $event)"
                  @mouseleave="mouseEnd(1, $event)"
                  :src="item.image" fluid-grow
                  class="d-md-none d-block"
                  style="height: 260px"
              />
            </div>
            <div class="right-content ml-md-3" col cols="8" md="8">
              <div class="description m-md-0 mt-2 mb-2">
                {{item.description}}
              </div>
              <div class="button-menu">
                <div class="menu mr-2 mr-md-2 mr-lg-4"
                    @mouseenter="mouse"
                    @mouseleave="leave">
                  <svg-icon icon-class="user" />
                  {{item.nickName}}
                </div>
                <div class="menu mr-2 mr-md-2 mr-lg-4"
                    @mouseenter="mouse"
                    @mouseleave="leave">
                  <svg-icon icon-class="calendar" />
                  {{item.createTime}}
                </div>
                <div class="menu mr-2 mr-md-2 mr-lg-4"
                    @mouseenter="mouse"
                    @mouseleave="leave">
                  <svg-icon icon-class="view" />
                  {{item.readNum}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="articles.length > 0" class="content-row w-100 mb-sm-4">
        <b-col cols="12" class="shadow-sm d-none d-sm-block">
          <pagination :query="query" @page="handlePage" />
        </b-col>
        <b-col cols="12" class="content-row shadow-sm d-sm-none d-block">
          <mobile-pagination :query="query" @page="handlePage" />
        </b-col>
      </div>
      <div v-else class="content-row w-100">
        <b-col cols="12">
          <not-searching :isShow="true" :type="contentType" />
        </b-col>
      </div>
    </div>
</template>

<script>
import Pagination from '../../components/Pagination'
import MobilePagination from '../../components/MobilePagination'
import NotSearching from '../../components/NotSearching'
import { mapGetters } from 'vuex'
import { list } from '@/api/article'

export default {
  name: 'HomeContent',
  data () {
    return {
      background: {
        'background': ''
      },
      query: {
        current: 1,
        size: 20
      },
      contentType: 'loading',
      articles: []
    }
  },
  mounted () {
    this.background.background = this.getBackground
    this.getList()
  },
  methods: {
    // 获取文章列表
    getList () {
      this.query.total = null
      this.query.pages = null
      this.contentType = 'loading'
      list(this.query).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          var data = response.data.data
          // 文章数据
          this.articles = data.records
          // 总数据量
          this.query.total = data.total
          // 总页数
          this.query.pages = data.pages
          if (this.query.total === 0) {
            this.contentType = 'noData'
          }
        } else {
          this.$notify({
            title: '来自远程服务器的提示',
            message: '非常抱歉，服务器生病了，管理员正在帮它治病，请耐心等候~',
            type: 'error'
          })
        }
      })
    },
    mouseStart (type, e) {
      if (type === 0) {
        e.currentTarget.className = 'animated rubberBand'
        e.currentTarget.style.color = this.getBackground
      } else if (type === 1) {
        e.currentTarget.style.borderColor = this.getBackground
      }
    },
    mouseEnd (type, e) {
      if (type === 0) {
        e.currentTarget.className = ''
        e.currentTarget.style.color = ''
      } else if (type === 1) {
        e.currentTarget.style.borderColor = ''
      }
    },
    // 选择文章，进行跳转
    selectItem (id) {
      this.$router.push({
        path: `/content_detail/${id}`
      })
    },
    mouse (e) {
      e.currentTarget.style.background = this.getBackground
      e.currentTarget.style.borderColor = this.getBackground
    },
    leave (e) {
      e.currentTarget.style.background = ''
      e.currentTarget.style.borderColor = ''
    },
    // 分页查询
    handlePage (query) {
      this.query = query
      this.getList()
    }
  },
  watch: {
    // 当前页发生变化时，请求数据
    newCurrent (newValue, oldValue) {
      this.getList()
      this.content = null
    },
    // 检测路由参数变化，进行条件搜索
    $route () {
      const search = this.$route.query.search
      const tagId = this.$route.query.tagId
      const induction = this.$route.query.induction
      if (search !== '' || tagId !== '' || induction !== '') {
        this.query.searchContent = search
        this.query.tagId = tagId
        this.query.date = induction
      } else {
        this.query.searchContent = null
        this.query.tagId = null
        this.query.date = null
      }
      this.getList()
    }
  },
  computed: {
    ...mapGetters([
      'getBackground'
    ]),
    newCurrent () {
      return this.query.current
    }
  },
  components: {
    Pagination,
    MobilePagination,
    NotSearching
  }
}
</script>

<style scoped lang="stylus">
  @import "~styles/custom/mixins.styl"
  @media (min-width: 540px)
    .content
      .content-row
        .title
          line-height 38px
        .bottom-content
          .picture img
            width 200px
            cursor pointer
            transform: scale(1); /*图片原始大小1倍*/
            transition: all ease .6s;
            border: 1px solid transparent; /* 加上防止缩放抖动 */
            box-shadow: 0 0 20px 6px transparent /* 加上防止缩放抖动 */
          .picture img:hover
            transform: scale(1.2); /*图片需要放大2倍*/
            position: relative; /*相对定位，是相对于前面的容器定位的*/
            z-index: 100;
            border: 1px solid rgba(35,189,189,.8);
            box-shadow 0 0 20px 6px rgba(60, 60, 60,.08)
          .right-content
            .description
              height: 90px
  @media (max-width: 540px)
    .content
      .content-row
        .title
          line-height 24px
          margin-bottom 4px
          margin-top 4px
        .bottom-content
          .right-content
            .description
              height: 80px;

  .content
    display flex
    position relative
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    .content-row
      background #fff
      opacity: 0.8
      margin-left 0
      margin-right 0
      width: 100%;
      .title
        // line-height 38px
        display:inline-block
        span
          display block
          cursor pointer
          font-weight: bold
      .bottom-content
        display flex
        flex-flow row
        // .picture img
        //   width 200px
        //   cursor pointer
        //   transform: scale(1); /*图片原始大小1倍*/
        //   transition: all ease .6s;
        //   border: 1px solid transparent; /* 加上防止缩放抖动 */
        //   box-shadow: 0 0 20px 6px transparent /* 加上防止缩放抖动 */
        // .picture img:hover
        //   transform: scale(1.2); /*图片需要放大2倍*/
        //   position: relative; /*相对定位，是相对于前面的容器定位的*/
        //   z-index: 100;
        //   border: 1px solid rgba(35,189,189,.8);
        //   box-shadow 0 0 20px 6px rgba(60, 60, 60,.08)
        .right-content
          display flex
          flex-flow: column
          display table-cell
          vertical-align top
          display flex
          flex-direction column
          justify-content: space-between
          .description
            // height 90px
            line-height 30px
            mulEllipsis()
          .button-menu
            .menu
              float left
              display: inline;
              border: 1px #C2C2C2 solid;
              border-radius: 2px;
              -moz-border-radius: 2px;
              text-align: center;
              padding: 4px 12px;
              cursor: pointer;
              line-height: 16px;
              color: #333;
              text-decoration: none;
              font-size 12px
              .iconfont
                font-size 10px
            .menu:hover
              border: 1px #23BDBD solid;
              /*background #23BDBD*/
              color #fff
</style>
